class Scrollbar {
	constructor(options) {
		// 默认允许创建bar
		this.flag = true;
		this.options = {
			// bar的宽度
			barWidth: '19px',
			// 数据总数
			total: 0,
			// 当前滚动位置
			pos: 0,
			// 单项尺寸
			itemSize: 20,
			// 控件尺寸
			size: 500,
			// 滚动速度
			speed: 100,
			// 创建滚动条的阈值
			threshold: 50,
			// 其他参数
			...options
		};
	}

	setOptions(options) {
		Object.assign(this.options, options);
		const { threshold, scorllBox, contentBox, total } = this.options;
		if (this.bar) {
			// bar存在，可以移除
			if (total <= threshold) {
				// 需要移除bar
				console.log('移除bar')
				this.bar.remove();
				this.bar = null;
				this.content = null;
			}
		} else {
			// bar不存在，允许创建
			if (total > threshold) {
				// 需要创建bar
				this.createBar(scorllBox);
				if (this.wheel) {
					// 滚动监听已经绑定过
				} else {
					this.bindContent(contentBox);
				}
			}
		}
		this.refresh();
	}

	refresh() {
		const { size, total, itemSize } = this.options;
		if (this.bar) {
			//设置控件高度
			this.bar.style.height = size + "px";
			//设置内容高度
			this.content.style.height = total * itemSize + "px";
		}
	}

	//获取滚动位置
	getPos() {
		let top = this.bar.scrollTop;
		let pos = parseInt(top / this.options.itemSize);
		return pos;
	}
	//每页可展示的数据数量
	getRowNumber() {
		return this.options.size / this.options.itemSize;
	}

	//滚动事件响应
	scroll() {
		let pos = this.getPos();
		if (pos == this.options.pos) return;
		this.options.pos = pos;
		this.onScroll(pos);
	}

	initDom(dom) {
		return typeof(dom) == "string" ? document.querySelector(dom) : dom;
	}
	//滚动条创建
	createBar(dom) {
		let bar = this.bar = document.createElement("div");
		let content = this.content = document.createElement("div");
		
		bar.appendChild(content);
		bar.style.width = this.options.barWidth;
		bar.style.overflowY = "scroll";
		bar.style.overflowX = "hidden";
		if (bar.attachEvent) {
			bar.attachEvent("onscroll", () => this.scroll());
		} else { //firefox兼容
			bar.addEventListener("scroll", () => this.scroll(), false);
		}
		content.style.backgroundColor = "white";
		content.style.width = "1px";

		dom = this.initDom(dom);
		dom.innerHTML = "";
		dom.appendChild(bar);
		this.refresh();
	}

	// 对内容绑定滚动事件
	bindContent(dom) {
		this.listDom = this.initDom(dom);
		//统一处理滚轮滚动事件
		const wheel = this.wheel = event => {
			let delta = 0;
			if (!event) event = window.event;
			event.stopPropagation();
			if (event.wheelDelta) {
				//IE、chrome浏览器使用的是wheelDelta，并且值为“正负120”
				delta = event.wheelDelta / 120;
				//因为IE、chrome等向下滚动是负值，FF是正值，为了处理一致性，在此取反处理
				if (window.opera) delta = -delta;
			} else if (event.detail) {
				//FF浏览器使用的是detail,其值为“正负3”
				delta = -event.detail / 3;
			}
			if (delta) handle(delta);
		}
		//上下滚动时的具体处理函数
		const handle = delta => {
			if (delta < 0) {
				// 向下滚动
				this.bar.scrollBy(0, this.options.speed);
			} else {
				// 向上滚动
				this.bar.scrollBy(0, -this.options.speed);
			}
		}
		// ==========================================
		if (window.addEventListener) {
			//FF,火狐浏览器会识别该方法
			this.listDom.addEventListener('DOMMouseScroll', wheel, false);
			this.listDom.addEventListener('mousewheel', wheel, false);
		} else {
			this.listDom.onmousewheel = wheel; //W3C
		}
	}
};

export default Scrollbar;